<template>
    <div>
        <el-dialog 
            :before-close="handleClose" 
            :center="dialogConfig.dialogCenter" 
            :title="dialogConfig.dialogTitle" 
            :visible.sync="dialogConfig.dialogStatus">
            <template>
                <slot></slot>
                <div slot="footer" class="dialog-footer" v-if="dialogConfig.hasButton">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="successButton">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>


<!--
弹窗组件

中间body内容使用slot匿名插槽（可以放入form表单，表格等）
点击确认会调用successButton，返回给父组件success

父组件模板：
例：
<Dialog :config="dialogConfig" @success="submitData">
    {{body内容，可以为form表单，表格等...}}
</Dialog>

@success就是回调内容，默认回调内容为success
-->
<script>
    export default {
    name: 'Dialog',
    props: {
        config:{
            type:Object,
            default:()=>{}
        }
    },
    components: {

    },
    data () {
        return {
            dialogConfig:{
                //弹窗状态
                dialogStatus:false,
                //弹窗标题
                dialogTitle:'新增',
                //弹窗标题与按钮是否居中
                dialogCenter:false,
                //是否有按钮
                hasButton:true,
            }
        }
    },
    methods: {

        //将父组件的初始值config循环赋值给当前对象的dialogConfig
        setConfig(){
            let config = this.config;
            if(!config) return;
            let dialogConfig = this.dialogConfig;
            let keys = Object.keys(dialogConfig);
            for(let key in config){
                if(keys.includes(key)){
                    dialogConfig[key] = config[key];
                }
            }
        },

        //关闭dialog之前，更改状态
        handleClose(){
            this.config.dialogStatus = false
        },

        //点击确定的回调给父组件
        successButton(){
            this.handleClose();
            this.$emit('success','success');
        }
    },
    mounted() {
        this.setConfig();
    },
    watch: {
        //监听父组件数据变化
        config:{
            handler(newV,oldV){
                this.dialogConfig.dialogStatus = newV.dialogStatus;
            },
            deep:true,
        }
    },
    computed: {

    },
    filters: {

    }
 }
</script>

<style scoped lang='scss'>

</style>